<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
	#box{
		width:300px;
		height:300px;
		border:1px solid black;
		position:relative;
		overflow:hidden;
	}
	#red{
		background-color:red;
		width:300px;
	}
	#green{
		background-color:green;
		width:300px;
	}
	#blue{
		background-color:blue;
		width:300px;
	}
	.slide{
		width:300px;
		height:300px;
		position:absolute;
	}
    img{width: 300px;
        height: 300px;
    }
</style>
<script type="text/javascript">
	onload=function(){
		var arr = document.getElementsByClassName("slide");
		for(var i=0;i<arr.length;i++){
			arr[i].style.left = i*300+"px";
		}
	}
	function LeftMove(){
		var arr = document.getElementsByClassName("slide");
		for(var i=0;i<arr.length;i++){
			var left = parseFloat(arr[i].style.left);
			left-=2;
			var width = 300;
			if(left<=-width){
				left=(arr.length-1)*width;
				clearInterval(moveId);
			}
			arr[i].style.left = left+"px";
		}
	}
	function divInterval(){
		moveId=setInterval(LeftMove,10);
	}
	
	
	timeId=setInterval(divInterval,2000);
	
	function stop(){
		clearInterval(timeId);
	}
	function start(){
		clearInterval(timeId);
		timeId=setInterval(divInterval,2000);
	}
	onblur = function(){
		stop();
	}
	onfocus = function(){
		start();
	}
</script>
</head>
<body>
	<div id="box" onmouseover="stop()" onmouseout="start()">
		<div id="red" class="slide">
            <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1657667479,2832085024&fm=26&gp=0.jpg" alt="">
        </div>
		<div id="green" class="slide">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs6.sinaimg.cn%2Fmiddle%2F415bd3a3g823212630785%26690&refer=http%3A%2F%2Fs6.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621679741&t=444cf46b6b3cc8b8a588efa131d205a9" alt="">
        </div>
		<div id="blue" class="slide">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F286%2F691%2F178%2F74200b8cc539495c8153899fd1180477.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621679741&t=039b86e624423bc46b5b720841558436" alt="">
        </div>
	</div>
</body>
</html>